<template>
  <div id="wrap">
    <div class="login" >
      <h2>情感咨询AI登录</h2>
      <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="username">
          <el-input type="username" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div class="button2">
        <button @click="login">登录</button>
        <router-link to="/Register">
          <button >注册</button>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: "LoginView",
  data() {
    return {
      ruleForm: {
        username:'',
        password: '',
      },
    };
  },
  methods: {
    login() {
          // 验证通过
          axios.post('http://localhost:8080/User/login',this.ruleForm)
              .then(response => {
                console.log(response.data)
                if(response.data.code==200) {

                  localStorage.setItem('userData', JSON.stringify(response.data.data));
                  this.$router.push("/home");
                }
                else {
                  this.$message.error("登录失败");
                }
              })
              .catch(error => {
                console.error('Error adding new item:', error);
                this.$message.error("登录失败");
              });
    },
  }
};
</script>
<style>
.demo-ruleForm label {
  color: white !important;
  font-size: 20px;
  margin-bottom: 30px;
}
</style>
<style scoped>
body,
html {
  height: 100%;
  margin: 10%;
}
.button2 {
  display: flex;
  justify-content: space-around;
}

#wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login {
  width: 460px;
  padding: 40px;
  background-color: rgb(31, 41, 55);
  box-shadow: 0 15px 25px rgba(0, 0, 0,.6);
  border-radius: 10px;
  color: #fff;
  --c1: #03e9f4;
}

.login h2 {
  font-size: 30px;
  text-align: center;

}

.login button {
  padding: 10px 20px;
  font-size: 16px;
  color: #03e9f4;
  background-color: #000;
  border: 2px solid #03e9f4;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 153, 255, 0.5);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.login button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 0, 0, 0) 0%, rgba(0, 153, 255, 0.5) 50%, rgba(255, 0, 0, 0) 100%);
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}

.login button:hover::before {
  transform: translateX(100%);
}
</style>